<template>
    <div>

        <div class="head">
            <div class="iconfont icon-zuojiantou myicon" @click.stop="back"></div>
            <div class="title">{{friendAttr.name}}</div>
        </div>

        <div class="message" v-scrolltop>
            <ul >
                <li v-for="(item,index) in messageList" :key="item.id" class="message_row">
<!--                    <div class="time" v-if=""></div>-->
                    <div class="img_and_text">
                        <div :class="item.fromid === myusername?'img_hidden_your':'img_show_your'" >

                        </div>

                        <div :class="item.fromid === myusername?'img_show_my':'img_hidden_my'" >

                        </div>

                        <div :class="item.fromid === myusername?'message_my':'message_your'">
                            {{item.message}}
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="dibu">
            <div class="input_area">
                <textarea-autosize
                        placeholder=""
                        ref="myTextarea"
                        v-model="value"
                        :min-height="5"
                        :max-height="50"
                        style="width: 280px;border-radius: 5px;"
                />
            </div>
            <div class="send" @click.stop="send_message">
                 发送
            </div>
        </div>

    </div>
</template>

<script>
    import Vue from 'vue'
    import VueTextareaAutosize from 'vue-textarea-autosize'
    import Cookies from 'js-cookie'
    import moment from 'moment';
    import {insert_Message,select_Message,select_user_by_username,update_message_left} from "../../request/api";
    import { Notify } from 'vant';
    Vue.use(Notify).use(VueTextareaAutosize);

    Vue.directive("scrolltop",{
        bind:function (el) {
            document.documentElement.scrollTop=1000000;
        },
        inserted:function (el) {
            document.documentElement.scrollTop=1000000;
        },
        update:function (el) {
            document.documentElement.scrollTop=1000000;
        },
        componentUpdated:function (el) {
            document.documentElement.scrollTop=1000000;
        },
    })

    export default {
        name: "chat",
        data(){
            return{
                messageList:[],
                friendAttr:{},
                value:"",
                myusername:null,
            }
        },
        created(){

            this.$store.state.bus.$on("reload_chat_list",()=>{
                console.log("聊天页面收到了")

                //重新渲染chat列表
                this.reload_chat_list();

            })

        },
        mounted(){
            console.log("现在的路径",this.$router.currentRoute.path);
            this.myusername=Cookies.get('username');
            //查询好友信息
            select_user_by_username({"username":this.$route.query.id}).then(res=>{
                this.friendAttr=res.data;
            })

            console.log(this.friendAttr);

            //重新渲染chat列表
            this.reload_chat_list_first();

        },

        methods:{

            back(){
                this.$router.back();
            },

            reload_chat_list_first(){
                //查询消息表数据 重新渲染自己的列表
                let select_message_my={
                    "fromid":Cookies.get('username'),
                    "toid":this.$route.query.id,
                }
                select_Message(select_message_my).then(res=>{
                    this.messageList=res.data;
                })
            },

            reload_chat_list(){

                //查询消息表数据 重新渲染自己的列表
                let select_message_my={
                    "fromid":Cookies.get('username'),
                    "toid":this.$route.query.id,
                }

                select_Message(select_message_my).then(res=>{
                    this.messageList=res.data;

                    //重新渲染message列表
                    let message_left_row={
                        "fromid":Cookies.get('username'),
                        "fromName":this.$store.state.myselfAttribute.name,
                        "toid":this.$route.query.id,
                        "toName":this.friendAttr.name,
                        "last_message":this.messageList[this.messageList.length-1].message,
                        "time":moment().format('YYYY-MM-DD HH:mm:ss'),
                    }
                    update_message_left(message_left_row).then(res=>{
                        this.$store.commit("setMessageList",res.data);
                    })


                    //通知对方重新渲染message列表
                    let reload_message_list_data={
                        "type":"reload_message_list",
                        "toid":this.$route.query.id,
                    }
                    this.$store.state.websocket.send(JSON.stringify(reload_message_list_data));

                })
            },

            send_message(){

                if(this.value === ""){
                    return ;
                }

                let message={
                    "fromid":Cookies.get('username'),
                    "toid":this.$route.query.id,
                    "message":this.value,
                    "time":moment().format('YYYY-MM-DD HH:mm:ss'),
                    "isread":"false"
                }

                insert_Message(message).then(res=>{

                    if(res.data.state === 200){
                        this.value="";

                        //查询消息表数据 重新渲染自己的列表
                        //重新渲染chat列表
                        this.reload_chat_list();

                        //通知对方从新渲染chat列表
                        let socket_message={
                            "type":"reload_chat_list",
                            "fromid":Cookies.get('username'),
                            "toid":this.$route.query.id,
                        }
                        this.$store.state.websocket.send(JSON.stringify(socket_message));

                    }else{

                    }

                })
            },
        }
    }
</script>

<style scoped>
    .head{height: 50px;width: 100%;display: flex;flex-direction: row;position: sticky;top: 0px;background-color: white;}
    .myicon{font-size: 21px;position: fixed;top: 16px;left: 21px;}
    .title{font-size: 18px;line-height: 50px;text-align: center;flex-grow: 1;}

    .message_row{width: 100%;margin: 20px auto;}
    .time{font-size: 10px;color: #bbbbbb;width: 100%;height: 33px;line-height: 33px;text-align: center;}
    .img_and_text{width: 100%;margin-top: 18px;clear: both;overflow: hidden;}
    .message_content{background-color: pink;border-radius: 5px;}

    .img_show_your{width: 43px;height: 43px;background: url("http://admin.xukunqi.com/public/static/headimage.png");background-size: 100% 100%;background-repeat: no-repeat;float: left;}
    .img_hidden_your{width: 43px;height: 43px;background-color: white;float: left;}

    .message_your{float: left;line-height: 43px;margin-left: 10px;background-color: pink;border-radius: 5px;padding: 0px 4px;font-size: 16px;max-width: 247px;}
    .message_my{float: right;line-height: 43px;margin-right: 10px;background-color: pink;border-radius: 5px;padding: 0px 4px;font-size: 16px;max-width: 247px;}

    .img_show_my{width: 43px;height: 43px;background: url("http://admin.xukunqi.com/public/static/headimage.png");background-size: 100% 100%;background-repeat: no-repeat;float: right;}
    .img_hidden_my{width: 43px;height: 43px;background-color: white;float: right;}

    .message{width: 353px;margin: 0px auto;font-size: 18px;line-height: 18px;padding-top: 12px;margin-bottom: 50px;}

    .dibu{width: calc(100% - 8px);max-height: 200px;border: 1px solid #f2f1f4;position: fixed;bottom: 0px;left: 4px;right: 4px;background-color: #f8f8f8;border-radius: 5px;display: flex;flex-direction: row;}
    .input_area{margin-bottom: -3px;}

    .send{background-color: #1aad19;height: 41px;width: calc(100% - 290px);border-radius: 5px;color: white;text-align: center;line-height: 41px;position: fixed;bottom: 2px;right: 2px;}
    .send:active{background-color: #f8f8f8;}
</style>